body {
  padding-top: 50px;
}

.starter-template {
  padding: 40px 15px;
  text-align: center;
}

div#nav {
	left: 0px;
	top: 0px;

	width: 100%;
	height: 50px;
	/*margin: 0;*/

	background-color: #dedede;
	position: fixed;
}

div#sidebar{
	left: 0px;
	top:55px;

	width:400px;

	margin: 0;

	float: left;

	background-color: #eeeeee;
}

div#content{
	margin-left: 420px;
	margin-top: 55px;
	/*margin-right: 10px;*/

	/*width: 100%;*/
	height: 800px;	
	background-color: #dddddd;
}

div#footer{
	left: 0px;
	bottom: 0px;

	width: 100%;
	height: 50px;

	margin-top: 5px;
	clear: both;
	background-color: #aaaaaa;
}

/*navigation style sheet*/
/*vertical list navigatin bars*/
ul.vertical-nav {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 200px;
	background-color: #f1f1f1;
}

ul.vertical-nav li a {
	display: block;
	color: #000;
	padding: 8px 0 8px 16px;
	text-decoration: none;
}

ul.vertical-nav li a:hover:not(.active){
	background-color: #555;
	color: white;
}

ul.vertical-nav li a.active {
	background-color: #4caf50;
	color: white;
}


/*horizontal list navigation bars*/
ul.horizontal-nav{
	list-style-type: none;
	margin: 0;
	padding: 0;
	/*height: 30px;*/
	/*background-color: #fff;*/
	width:80%;
	text-align: center;
	overflow: hidden;
	border-radius: 10px ;
	/*border: 1px solid #e7e7e7;  set the border style for navigation bar */
}

ul.horizontal-nav li {
	/*width: 50px;*/ /* set each items width*/
	padding: 0;
	margin: 0;
	float: left; /* this makes the list item stay together*/
	display: block;
	background-color: #333;
	border-radius: 10px 10px 10px 10px;
	border-right: 1px solid #bbb; /*add a line separater for each item*/
}

/*set the style for the last list item*/
ul.horizontal-nav li:last-child{
	border-right: none;
	/*float: right;*/
}

ul.horizontal-nav li a {
	display: block;
	color: #fff;
	text-decoration: none;
	padding: 14px 16px;
	text-align: center;
	border-radius: 10px 10px 10px 10px;
}

ul.horizontal-nav li a:hover:not(.active){
	background-color: #555;
	color: white;
	
}

ul.horizontal-nav li a.active{
	background-color: #4caf50;
	color: white;
	border-radius: 10px 10px 10px 10px; /* make the block angle more smoothly*/
}



